import React, { Component } from 'react'
import { TopNavHeader } from '../common'
import { Switch } from 'antd-mobile'

export default class MakePosition extends Component {
  constructor() {
    super()
    this.renderAmountRow = this.renderAmountRow.bind(this)
    this.state = {
      toggle: false,
      lots: 1,
      limit: 0, // `use need to / 100`
      limitDelta: 'add',
      // stop: 0, // `use need to / 100`
      stop: {
        value: 0,
        operation: 'add',
      }
    }
  }
  render() {
    const { toggle, lots, limit, limitDelta, stop } = this.state
    return (
      <div className={`rt-make-position-container`}>
        <TopNavHeader title="建仓确认" />
        <div className={`rt-confirmation-box`}>
          <div className={`rt-left-box`}>
            <span>3KG工业银 (250元/手）</span>
            <div>
              <span>当前价格：</span>
              <span className={`rt-price`}>3971</span>
            </div>
          </div>

          <div className={`rt-right-box`}>
            <span>涨</span>
            <div>
              <span>保证金</span>
              <span className={`rt-padding-top`}>手续费</span>
            </div>
            <div>
              <span>400.00元</span>
              <span className={`rt-padding-top`}>45.00元</span>
            </div>
          </div>
        </div>

        <div className={`rt-account-info-box`}>
          <div>
            <span>可用资金</span>
            <span>2000.00元</span>
          </div>
          <div>
            <i className={`iconfont icon-question`} />
            <span>充值</span>
          </div>
        </div>

        <div className={`rt-lots-box`}>
          <span>手数</span>
          <div>
            <div>
              {[1, 2, 3, 4, 5].map(this.renderAmountRow)}
            </div>

            <div>
              {[6, 7, 8, 9, 10].map(this.renderAmountRow)}
            </div>
          </div>
        </div>

        <div className={`rt-stepper-box`}>
          <span>止盈</span>
          <div className={`rt-stepper`}>
            <div className={`rt-delta-operation`}>
              <span
                className={`rt-operator ${(limitDelta === 'subtract' ? 'rt-active-left' : '')}`}
                onClick={() => {
                  if (limit === 0 && limitDelta === 'subtract') return
                  let newLimit = limit - 10
                  if (newLimit < 0) newLimit = 0
                  this.setState({
                    limitDelta: 'subtract',
                    limit: newLimit,
                  })
                }}
              >
                －
              </span>
              <span>{limit}</span>
              <span
                className={`rt-operator ${(limitDelta === 'add' ? 'rt-active-right' : '')}`}
                onClick={() => {
                  if (limit === 50 && limitDelta === 'add') return
                  let newLimit = limit + 10
                  if (newLimit > 50) newLimit = 50
                  this.setState({
                    limitDelta: 'add',
                    limit: newLimit,
                  })
                }}
              >
                ＋
              </span>
            </div>
            <span>％</span>
          </div>
        </div>

        <div className={`rt-stepper-box`}>
          <span>止损</span>
          <div className={`rt-stepper`}>
            <div className={`rt-delta-operation`}>
              <span
                className={`rt-operator ${(stop.operation === 'subtract') ? 'rt-active-left' : ''}`}
                onClick={() => {
                  if (stop.operation === 'subtract' && stop.value === 0) return
                  stop.value -= 10
                  if (stop.value < 0) stop.value = 0
                  stop.operation = 'subtract'
                  this.setState({
                    stop,
                  })
                }}
              >
                －
              </span>
              <span>{stop.value}</span>
              <span
                className={`rt-operator ${(stop.operation === 'add') ? 'rt-active-right' : ''}`}
                onClick={() => {
                  if (stop.value === 50 && stop.operation === 'add') return
                  stop.value += 10
                  if (stop.value > 50) stop.value = 50
                  stop.operation = 'add'
                  this.setState({
                    stop,
                  })
                }}
              >
                ＋
              </span>
            </div>
            <span>％</span>
          </div>
        </div>

        <div className={`rt-switch-box`}>
          <div className={`rt-left-text`}>
            <span>持仓过夜</span>
          </div>

          <div>
            <span className={`rt-deferred-charges`}>（递延费：0元/KG x 天）</span>
            <Switch
              checked={toggle}
              onChange={(v) => {
                this.setState({
                  toggle: v,
                })
              }}
            />
          </div>
        </div>

        <div className={`rt-switch-box`}>
          <div className={`rt-left-text`}>
            <span>持仓过夜</span>
            <span className={`rt-extra-info`}>（可用体验券  3  张）</span>
          </div>

          <div>
            <Switch
              checked={toggle}
              onChange={(v) => {
                this.setState({
                  toggle: v,
                })
              }}
            />
          </div>
        </div>

        <div className={`rt-switch-box`}>
          <div className={`rt-left-text`}>
            <span>按实时价格成交</span>
          </div>

          <div>
            <Switch
              checked={toggle}
              onChange={(v) => {
                this.setState({
                  toggle: v,
                })
              }}
            />
          </div>
        </div>

        <div className={`cm-bottom-btn`}>确  认</div>
      </div>
    )
  }
  renderAmountRow(v) {
    const { lots } = this.state
    return (
      <span
        key={v}
        className={`${(lots === v) ? 'rt-active-lots' : ''}`}
        onClick={() => {
          if (lots === v) return
          this.setState({
            lots: v,
          })
        }}
      >
        {v}
        {
          lots === v
          ? (
            <div className={`cm-right-angle-trangle-box rt-corner-box`}>
              <div className={`cm-tick-box cm-tick-box-hide rt-adjust-tick`}></div>
            </div>
          )
          : null
        }
      </span>
    )
  }
}